<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <!-- 包含头部信息用于适应不同设备
     width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
     nitial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
     通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。
    -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- 包含 bootstrap 样式表 -->
    <link rel="stylesheet" href="<?php echo base_url();?>lib/bootstrap-3.3.0/css/bootstrap.min.css">

    <script type="text/javascript" src="<?php echo base_url();?>lib/jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url();?>lib/bootstrap-3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<?php echo base_url();?>src/template1.js"></script>

    <title>模板信息</title>
</head>
<body>
<div class="container">
    <h2 align="center">模板信息</h2>
    <br/>

    <div id="template_content">
        <!--模板1 start-->
        <div id="template_content_item" class="row">
            <div class="col-xs-6" align="center">
                <img src="<?php echo base_url();?>res/images/home.jpg" class="img-responsive img-thumbnail" align="center" alt="封面">
            </div>
            <div class="col-xs-6" align="center">
                <img src="<?php echo base_url();?>res/images/content.jpg" class="img-responsive img-thumbnail" align="center" alt="内容">
            </div>
        </div>
        <!--模板1 end-->

        <!--模板2 start-->
        <div id="template_content_item" class="row" style="display: none">
            <div class="col-xs-6" align="center">
                <img src="<?php echo base_url();?>res/images/home2.jpg" class="img-responsive img-thumbnail" align="center" alt="封面">
            </div>
            <div class="col-xs-6" align="center">
                <img src="<?php echo base_url();?>res/images/content.jpg" class="img-responsive img-thumbnail" align="center" alt="内容">
            </div>
        </div>
        <!--模板2 end-->

        <!--模板3 start-->
        <div id="template_content_item" class="row" style="display: none">
            <div class="col-xs-6" align="center">
                <img src="<?php echo base_url();?>res/images/home3.jpg" class="img-responsive img-thumbnail" align="center" alt="封面">
            </div>
            <div class="col-xs-6" align="center">
                <img src="<?php echo base_url();?>res/images/content.jpg" class="img-responsive img-thumbnail" align="center" alt="内容">
            </div>
        </div>
        <!--模板3 end-->
    </div>

    <br/>
    <br/>

    <!--模板缩略图 start-->
    <div class="row">
        <div class="col-xs-4">
            <a href="javascript:void(0)" class="thumbnail">
                <img src="<?php echo base_url();?>res/images/home.jpg" alt="模板一">

                <div align="center">模板一</div>
            </a>
        </div>
        <div class="col-xs-4">
            <a href="javascript:void(0)" class="thumbnail">
                <img src="<?php echo base_url();?>res/images/home.jpg" alt="模板二">

                <div align="center">模板二</div>
            </a>
        </div>
        <div class="col-xs-4">
            <a href="javascript:void(0)" class="thumbnail">
                <img src="<?php echo base_url();?>res/images/home.jpg" alt="模板三">

                <div align="center">模板三</div>
            </a>
        </div>
    </div>
    <!--模板缩略图 end-->

    <br/>

    <button id="template1_next" type="button" class="btn btn-primary btn-lg btn-block">下一步</button>

    <br/>
</div>
</body>
</html>